<template>
  <div>
    <a-form v-if="find" @submit="handleSubmit" :form="form" style="width: 50%">
      <a-form-item v-bind="formItemLayout" label="当前支付密码">
        <div>
          <a-input
            v-if="sensitive == 1"
            @change="setInput"
            @focus="showKeyboard(1)"
            :maxLength="maxLength"
            class="input-width"
            placeholder="请输入当前支付密码"
            v-decorator="[
              'currentpaypwd',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入当前支付密码',
                  },
                  { validator: validateToNextpayword },
                ],
                validateTrigger: 'blur',
              },
            ]"
            type="password"
          />
          <a-input
            v-else
            class="input-width"
            placeholder="请输入当前支付密码"
            v-decorator="[
              'currentpaypwd',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入当前支付密码',
                  },
                  { validator: validateToNextpayword },
                ],
                validateTrigger: 'blur',
              },
            ]"
            type="password"
          />
          <span v-if="payPassword" style="color: #40a9ff; font-size: 12px" @click="forget"
            >忘记支付密码</span
          >
        </div>
        <SimpleKeyboard
        @onChange="onChange"
        :input="input"
        v-if="isKeyBoard"
      />
      </a-form-item>

      <div v-if="forgetshow" style="width: 400px; margin: 0 auto">
        <!-- <div class="type">
          <span class="span-wid">通过“邮箱验证+回答安全密保问题”找回</span>
          <a-button type="primary" class="but-sty" @click="gomodify(1)">立即重置</a-button>
        </div> -->
        <div class="type">
          <span class="span-wid">通过“手机验证”找回</span>
          <a-button type="primary" class="but-sty" @click="gomodify(2)"
            >立即重置</a-button
          >
        </div>
      </div>

      <a-form-item
        v-bind="formItemLayout"
        label="新支付密码"
        help="支付密码为6位纯数字密码"
      >
        <a-input
          v-if="sensitive==1"
          @change="setInput2"
          @focus="showKeyboard(2)"
          :maxLength="maxLength"
          class="input-width"
          placeholder="请输入新支付密码"
          v-decorator="[
            'paypwd',
            {
              rules: [
                {
                  required: true,
                  message: '请输入新支付密码',
                },
                { validator: validateToNextpayword },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <a-input
          v-else
          class="input-width"
          placeholder="请输入新支付密码"
          v-decorator="[
            'paypwd',
            {
              rules: [
                {
                  required: true,
                  message: '请输入新支付密码',
                },
                { validator: validateToNextpayword },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <SimpleKeyboard
        @onChange="onChange2"
        :input="input2"
        v-if="isKeyBoard2"
      />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认新支付密码">
        <a-input
          v-if="sensitive==1"
          @change="setInput3"
          @focus="showKeyboard(3)"
          :maxLength="maxLength"
          class="input-width"
          placeholder="确认新支付密码"
          v-decorator="[
            'paypwdagain',
            {
              rules: [
                {
                  required: true,
                  message: '确认新支付密码',
                },
                {
                  validator: compareToFirstpayword,
                },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <a-input
          v-else
          class="input-width"
          placeholder="确认新支付密码"
          v-decorator="[
            'paypwdagain',
            {
              rules: [
                {
                  required: true,
                  message: '确认新支付密码',
                },
                {
                  validator: compareToFirstpayword,
                },
              ],
              validateTrigger: 'blur',
            },
          ]"
          type="password"
        />
        <SimpleKeyboard
        @onChange="onChange3"
        :input="input3"
        v-if="isKeyBoard3"
      />
      </a-form-item>
      <div style="text-align: center">
        <a-button style="width: 100px" htmlType="submit" type="primary"
          >确定</a-button
        >
      </div>
    </a-form>
    <router-view v-if="!find"></router-view>

    <a-modal title="支付密码重置成功！" v-model="visible" :footer="null">
      <div style="text-align: center">
        <!-- <a-button type="primary" @click="gologin">重新登录</a-button> -->
        <a-button type="primary" @click="goindex">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
// import GlobalFooter from "../../layouts/GlobalFooter";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import api from "@/common/api";
import SimpleKeyboard from "../../common/keyboard.vue";
import { get, post } from "@/common/api";
const ATabPane = ATabs.TabPane;

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    // GlobalFooter,
    ATabPane,
    ATabs,
    AForm,
    SimpleKeyboard,
  },
  data() {
    return {
      visible: false,
      find: true,
      form: this.$form.createForm(this),
      error: "",
      forgetshow: false,
      currentpaypwd: "",
      paypwdagain: "",
      paypwd: "",
      login: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16, offset: 1 },
          md: { span: 14 },
        },
      },
      input: "",
      input2: "",
      input3: "",
      isKeyBoard: false,
      isKeyBoard2: false,
      isKeyBoard3: false,
      maxLength: 0,
      sensitive: localStorage.getItem("sensitive"),
      payPassword:sessionStorage.getItem("payPassword")
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.transApiSetToken();
  },
  methods: {
    showKeyboard(type) {
      switch (type) {
        case 1:
          this.isKeyBoard = true;
          this.isKeyBoard2 = false;
          this.isKeyBoard3 = false;
          break;
        case 2:
          this.isKeyBoard = false;
          this.isKeyBoard2 = true;
          this.isKeyBoard3 = false;
          break;
        case 3:
          this.isKeyBoard = false;
          this.isKeyBoard2 = false;
          this.isKeyBoard3 = true;
      }
    },
    onChange(input) {
      console.log("input", input);
      this.form.setFieldsValue({
        currentpaypwd: input,
      });
      this.input = input;
    },
    onChange2(input) {
      console.log("input", input);
      this.form.setFieldsValue({
        paypwd: input,
      });
      this.input2 = input;
    },
    onChange3(input) {
      console.log("input", input);
      this.form.setFieldsValue({
        paypwdagain: input,
      });
      this.input3 = input;
    },
    setInput(e) {
      console.log(e.target.value);
      this.input = e.target.value;
    },
    setInput2(e) {
      console.log(e.target.value);
      this.input2 = e.target.value;
    },
    setInput3(e) {
      console.log(e.target.value);
      this.input3 = e.target.value;
    },
    handleChange(value) {
      // console.log(value);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          var count = 0
          for(let i=0;i<values.paypwd;i++){
            if(Math.abs(values.paypwd[i]-values.paypwd[i-1])==1){
              count +=1
            }
          }
          
          if(count==5){
            this.$message.error('密码不能为连续的六位数字');
            return
          }
          if(/^(\d)\1\1\1\1\1$/.test(values.paypwd)){
            this.$message.error('密码不能为重复的六位数字');
            return
          }
          this.currentpaypwd = values.currentpaypwd;
          this.paypwd = values.paypwd;
          // console.log("Received values of form: ", values);
          this.changePayPwd();
        }
      });
    },
    changePayPwd() {
      var params = {
        scope: "updatePwd",
        key: localStorage.getItem("mobileNo"),
      };
      api.fetchPubKey(
        params,
        (res) => {
          let data = {
            onePwd: api.getEncryptData(res.data.pubKey, this.paypwd),
            twoPwd: api.getEncryptData(res.data.pubKey, this.paypwdagain),
            payPwd: api.getEncryptData(res.data.pubKey, this.currentpaypwd),
            key: params.key,
          };
          api.ChangePaypwd(
            data,
            (res) => {
              if (res.code == "OK") {
                this.visible = true;
              }else if (res.message == "当前输入的原始支付密码不一致") {
                    console.log('flag',1)
                    let count = localStorage.getItem("failCount");
                    if (count) {
                      if(count==4){
                        this.$message.error('密码错误超过限制，请重新登陆');
                        setTimeout(()=>{
                          this.$router.push({path:'/'})
                        },1500)
                      }else{
                        this.$message.error(res.message);
                        localStorage.setItem('failCount',parseInt(count)+1) 
                      }
                    }else{
                      localStorage.setItem('failCount',1)
                      this.$message.error(res.message);
                    }
                  } else {
                this.$message.error(res.message);
              }
            },
            (err) => {}
          );
        },
        (error) => {
          alert("错误");
        }
      );
      // let data = {
      //   onePwd: this.paypwd,
      //   twoPwd: this.paypwdagain,
      //   payPwd: this.currentpaypwd
      // };
      // api.ChangePaypwd(
      //   data,
      //   res => {
      //     console.log("res", res);
      //     if (res.code == "OK") {
      //       this.visible = true;
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   },
      //   err => {}
      // );
    },
    // 支付密码验证
    validateToNextpayword(rule, value, callback) {
      const form = this.form;
      const reg = new RegExp("^[0-9]{6}$");
      if (value && !reg.test(value)) {
        // form.validateFields(['confirm'], { force: true });
        callback("您输入支付密码的格式有误！");
      } else {
        console.log("支付密码", value);
        // this.currentpaypwd = value;
      }
      callback();
    },
    compareToFirstpayword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("paypwd")) {
        callback("两次输入的支付密码不一致!");
      } else {
        this.paypwdagain = value;
        callback();
      }
    },

    goindex() {
      this.visible = false;
      this.$router.push("/userindex");
    },
    gomodify(value) {
      this.find = false;
      this.$router.push("/org/safeset/modifypayindex/modifypaypw" + value);
    },
    forget() {
      this.forgetshow = !this.forgetshow;
    },
    getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == " ") c = c.substring(1);
        if (c.indexOf(name) != -1) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    },
    transApiSetToken() {
      var token = this.getCookie("Authorization");
      if (token) {
        localStorage.setItem("token", token);
        if (!this.payPassword) {
          this.find = false;
          this.$router.push("/org/safeset/modifypayindex/modifypaypw3");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}
.type {
  padding: 5px;
  background: #eee;
  margin-bottom: 10px;
}
.input-width {
  width: 68%;
}
.span-wid {
  width: 300px;
  display: inline-block;
  font-size: 13px;
}
.but-sty {
  font-size: 12px;
  padding: 0px 10px;
  height: 28px;
}
</style>
